@media screen and (prefers-color-scheme: dark), dark {
  :root {
    /* Comfortable dark themes don't use absolutes so the range is compressed */
    --c00: hsl(0, 0%, 80%);
    --c10: hsl(0, 0%, 73.5%);
    --c20: hsl(0, 0%, 66%);
    --c30: hsl(0, 0%, 59.5%);
    --c40: hsl(0, 0%, 53%);
    --c45: hsl(0, 0%, 49.75%);
    --c50: hsl(0, 0%, 46.5%);
    --c60: hsl(0, 0%, 40%);
    --c65: hsl(0, 0%, 36.75%);
    --c70: hsl(0, 0%, 33.5%);
    --c75: hsl(0, 0%, 30.25%);
    --c80: hsl(0, 0%, 27%);
    --c85: hsl(0, 0%, 23.75%);
    --c90: hsl(0, 0%, 20.5%);
    --c95: hsl(0, 0%, 17.25%);
    --c97: hsl(0, 0%, 15.95%);
    --c98: hsl(0, 0%, 15.3%);
    --c99: hsl(0, 0%, 14.65%);
    --c100: hsl(0, 0%, 14%);
    /* min/max are exposed in case we want to use an overdrive color for emphasis */
    --cmin: hsl(0, 0%, 100%);
    --cmax: hsl(0, 0%, 0%);
    --accent-1: hsl(180, 50%, 65%);
    --accent-2: hsl(180, 45%, 40%);
    --accent-3: hsl(180, 30%, 18%);
    --input-bg: var(--c95);
    --gold1: darkgoldenrod;
    --red1: hsl(0, 100%, 65%);
  }
  button {
    background: linear-gradient(var(--c85), var(--c90));
  }
  textarea,
  input[type=url],
  input[type=time] {
    background-color: var(--input-bg);
    color: var(--fg);
  }
  input::-webkit-inner-spin-button {
    filter: invert(.8);
  }
  input[type=radio]:checked:after {
    background-color: var(--fg);
  }
  input[type=time]::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
  input[type="range"] {
    color-scheme: dark;
  }
  select {
    background-color: var(--bg);
  }
  .CodeMirror-scrollbar-filler,
  .CodeMirror-gutter-filler {
    background-color: var(--bg) !important;
    border: 0;
  }
  ::-webkit-scrollbar {
    width: 17px;
    height: 17px;
    background: var(--bg);
  }
  ::-webkit-scrollbar-corner {
    background: var(--bg);
    border: 0;
  }
  /* buttons */
  ::-webkit-scrollbar-button:single-button {
    & {
      height: 17px;
      width: 17px;
      background-size: 9px;
      background-position: 4px 7px;
      background-repeat: no-repeat;
    }
    &:horizontal {
      background-position: 7px 4px;
    }
    /* up */
    &:vertical {
      &:decrement {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='1,0 0,1 2,1'/></svg>");
        &:hover {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='1,0 0,1 2,1'/></svg>");
        }
        &:active {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='1,0 0,1 2,1'/></svg>");
        }
      }
      /* down */
      &:increment {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='0,0 2,0 1,1'/></svg>");
        &:hover {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='0,0 2,0 1,1'/></svg>");
        }
        &:active {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='0,0 2,0 1,1'/></svg>");
        }
      }
    }
    /* left */
    &:horizontal {
      &:decrement {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='0,1 1,2 1,0'/></svg>");
        &:hover {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='0,1 1,2 1,0'/></svg>");
        }
        &:active {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='0,1 1,2 1,0'/></svg>");
        }
      }
      /* right */
      &:increment {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='0,0 0,2 1,1'/></svg>");
        &:hover {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='0,0 0,2 1,1'/></svg>");
        }
        &:active {
          background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='0,0 0,2 1,1'/></svg>");
        }
      }
    }
  }
  ::-webkit-scrollbar-track-piece {
    background: hsl(0, 0%, 17%);
    border: 1px solid var(--bg);
    &:hover {
      background: hsl(0, 0%, 20%);
    }
    &:active {
      background: hsl(0, 0%, 25%);
    }
  }
  ::-webkit-scrollbar-thumb {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' fill='hsl(0, 0%, 30%)'><rect width='1' height='1'/></svg>") 2px 2px no-repeat;
    &:horizontal {
      background-size: 100% 13px;
    }
    &:vertical {
      background-size: 13px 100%;
    }
    &:hover {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' fill='hsl(0, 0%, 33%)'><rect width='1' height='1'/></svg>");
    }
    &:active {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' fill='hsl(0, 0%, 40%)'><rect width='1' height='1'/></svg>");
    }
  }
  ::-webkit-resizer {
    background: var(--input-bg) linear-gradient(-45deg,
      transparent 3px, #888 3px,
      #888 4px, transparent 4px,
      transparent 6px, #888 6px,
      #888 7px, transparent 7px) no-repeat;
    border: 2px solid transparent;
  }
  :-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--input-bg) inset;
    -webkit-text-fill-color: #fff;
  }
  @supports (-moz-appearance: none) {
    /* Workarounds for FF bugs/quirks */
    input {
      color-scheme: dark;
    }
    textarea {
      border: 1px solid var(--c65);
    }
    * {
      scrollbar-color: var(--c75) var(--bg);
    }
  }
}
